<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>首页</title>
    <link rel="stylesheet" href="./lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/index.css">
</head>

<body>
    <!-- 创建布局容器 -->
    <div class="container-fluid">
        <!-- 使用栅格，创建行列 -->
        <div class="row">
            <!-- 左边菜单 -->
            <div class="col-md-2 main-left">
                <img class="logo" src="./images/user.jpg" alt="">
                <!-- ul li是块级元素，自动换行 -->
                <ul>
                    <li>
                        <a href="">
                            <!-- 应该是点击图标部分也能跳转，所以span图标也要放在a标签里面 -->
                            <span class="glyphicon glyphicon-home" aria-hidden="true"></span>
                            首页</a>
                    </li>
                    <li>
                        <a href="./order.html">
                            <span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
                            订单</a>
                    </li>
                    <li>
                        <a href="">
                            <span class="glyphicon glyphicon-user" aria-hidden="true"></span>
                            用户</a>
                    </li>
                </ul>
                <!-- 
                <a href="">首页</a>
                <a href="">订单</a>
                <a href="">用户</a>
                <a href="">设置</a> -->


            </div>
            <!-- 右边内容 -->
            <div class="col-md-10 main-right">
                <!-- 路径导航 -->
                <ol class="breadcrumb">
                    <li><a href="#">首页</a></li>
                    <li class="active">数据概览</li>
                </ol>

                <!-- 数据概览的展示 -->
                <div class="row data-show">
                    <div class="col-md-3 show-item">
                        <div class="num">999</div>
                        <div>今日单量</div>
                    </div>
                    <div class="col-md-3 show-item">
                        <div class="num">344</div>
                        <div>当月单量</div>
                    </div>
                    <div class="col-md-3 show-item">
                        <div class="num">12</div>
                        <div>销售额</div>
                    </div>
                    <div class="col-md-3 show-item">
                        <div class="num">233</div>
                        <div>当月销售额</div>
                    </div>
                </div>

                <!-- 搜索 -->
                <div class="form-group search-box">
                    <label for="fruit">某某查询:</label>
                    <input type="email" class="form-control " id="fruit" placeholder="请输入水果名称">

                    <button type="button" class="btn btn-info" onclick="getFruitList(1)">查询</button>
                    <button type="button" class="btn btn-warning">新增</button>
                </div>

                <!-- 数据列表-表格 -->
                <h4>数据列表</h4>
                <table class="table table-striped">
                    <thead>
                        <tr>
                            <th>水果名称</th>
                            <th>水果单价</th>
                            <th>水果库存</th>
                            <th>水果场地</th>
                            <th>操作</th>

                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td></td>
                            <td>
                                <button type="button" class="btn btn-info btn-sm" onclick="goDetail(1)">查看详情</button>
                                <button type="button" class="btn btn-warning btn-sm" data-target="myModal">修改</button>
                                <button type="button" class="btn btn-danger btn-sm">删除</button>
                            </td>

                        </tr>
                    </tbody>
                </table>


                <!-- 分页 -->
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <!-- <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li> -->
                        <!-- <li><a href="#" onclick="getFruitListByPage(1)">1</a></li>
                        <li><a href="#" onclick="getFruitListByPage(2)">2</a></li>
                        <li><a href="#" onclick="getFruitListByPage(3)">3</a></li>
                        <li><a href="#">4</a></li> -->
                        <!-- <li><a href="#">5</a></li> -->
                        <!-- <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li> -->
                    </ul>
                </nav>


                <!-- 其他模块 -->
                <div class="row other">
                    <div class="col-md-6 ">
                        <h5>热门水果</h5>
                        <ul class="list-group">
                            <li class="list-group-item">frfvfv ferfr</li>
                            <li class="list-group-item">frfvfv ferfr</li>
                            <li class="list-group-item">frfvfv ferfr</li>
                            <li class="list-group-item">frfvfv ferfr</li>
                        </ul>
                    </div>
                    <div class="col-md-6 ">
                        <h5>精选水果</h5>
                        <ul class="list-group">
                            <li class="list-group-item">frfvfv ferfr</li>
                            <li class="list-group-item">frfvfv ferfr</li>
                            <li class="list-group-item">frfvfv ferfr</li>
                            <li class="list-group-item">frfvfv ferfr</li>
                        </ul>
                    </div>

                </div>

            </div>
        </div>
    </div>

    <!-- 11 修改的弹窗 ——模态框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">水果信息</h4>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="fname">水果名称</label>
                        <input type="text" class="form-control" id="fname" placeholder="请输入水果名称">
                    </div>
                    <div class="form-group">
                        <label for="fprice">水果单价</label>
                        <input type="text" class="form-control" id="fprice" placeholder="请输入水果单价">
                    </div>
                    <div class="form-group">
                        <label for="fstock">水果库存</label>
                        <input type="text" class="form-control" id="fstock" placeholder="请输入水果库存">
                    </div>
                    <div class="form-group">
                        <label for="fsite">水果场地</label>
                        <input type="text" class="form-control" id="fsite" placeholder="请输入水果场地">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" onclick="confirmUpdate()">Save changes</button>
                </div>
            </div>
        </div>
    </div>

    <script src="./lib/jquery-3.6.1.min.js"></script>
    <script src="./lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="./js/index.js"></script>
    <script>

        // $('#myModal').modal('show')
        // $('#fname').val('苹果')
        // 有参设置，无参获取

        function goDetail(num) {
            location.href='./detail.html?id='+num+'&price=666'
            
        }

    </script>
</body>

</html>